import React from 'react';
import { Form, Input, Button } from 'antd';
import styles from './SampleList.module.css';

const { TextArea } = Input;

interface Sample {
  input: string;
  output: string;
}

interface SampleListProps {
  value?: Sample[] | null;
  onChange?: (samples: Sample[]) => void;
}

const SampleList: React.FC<SampleListProps> = ({ value, onChange }) => {
  const initialSamples = Array.isArray(value) && value.length > 0 
    ? value 
    : [{ input: '', output: '' }];

  return (
    <div className={styles.samples}>
      <div className={styles.sampleList}>
        {initialSamples.map((_, index) => (
          <div key={index} className={styles.sampleItem}>
            <div className={styles.sampleRow}>
              <Form.Item
                name={['samples', index, 'input']}
                label="样例输入"
                className={styles.sampleField}
                rules={[{ required: true, message: '请输入样例输入' }]}
              >
                <TextArea rows={3} />
              </Form.Item>
              <Form.Item
                name={['samples', index, 'output']}
                label="样例输出"
                className={styles.sampleField}
                rules={[{ required: true, message: '请输入样例输出' }]}
              >
                <TextArea rows={3} />
              </Form.Item>
            </div>
            {initialSamples.length > 1 && (
              <Button 
                type="link" 
                danger 
                onClick={() => {
                  const newSamples = [...initialSamples];
                  newSamples.splice(index, 1);
                  onChange?.(newSamples);
                }}
                className={styles.deleteButton}
              >
                删除样例
              </Button>
            )}
          </div>
        ))}
      </div>
      <Button 
        type="dashed" 
        onClick={() => {
          onChange?.([...initialSamples, { input: '', output: '' }]);
        }}
        block
        className={styles.addButton}
      >
        添加样例
      </Button>
    </div>
  );
};

export default SampleList; 